<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-form ref="formRef" :rules="formRules" :model="formModel" label-width="90px">
      <el-form-item label="教室">
        <div class="text-white"> {{formModel.roomName}}</div>
      </el-form-item>
      <el-form-item label="录制时间">
        <div class="text-white"> {{formModel.actionTime}}</div>
      </el-form-item>
      <el-form-item label="选择课程">
        <div class="d-flex justify-content-between ">
          <div class="flex-grow-1">
            <el-select class="w150px mr-3" v-model="formModel.roomName" placeholder="请选择">
              <el-option label="计算机学院" value="1" />
              <el-option label="教材学院" value="2" />
            </el-select>
            <el-select class="w150px mr-3" v-model="formModel.roomName" placeholder="请选择">
              <el-option label="计算机工程专业" value="1" />
            </el-select>
            <el-select class="w100px mr-3" v-model="formModel.roomName" placeholder="请选择">
              <el-option label="英语" value="1" />
              <el-option label="数学" value="0" />
              <el-option label="语文" value="2" />
            </el-select>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="选择老师">
        <el-select class="w100" v-model="formModel.roomName" placeholder="请选择">
          <el-option label="张三" value="1" />
          <el-option label="学学" value="0" />
          <el-option label="lilin" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">关闭</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { roleParams } from '@/apis/model/RoleModel';
import { getNewObj } from '@/utils/EsCommon';

// ======================================================
//                      变量声明
// ======================================================

// emit
const emit = defineEmits(['success']);

// 表单数据
const formAttrs = {
  id:null, // ID
  courseName: '',//课程名称
  teacherName: '',//教师名称
  pullingState: '',//拉取状态 0、失败，1成功、，2、未拉取,
  actionTime: '', // 录制时间
  pageviews: '',//浏览量
  title: '',//标题
  image: '',//标题
  roomName: '', // 所属教室
  releaseState: '',//发布状态
  note: '',//备注
};
// 请选择系统类型



// 表单组件的引用实例
const formRef = ref(null);
// 表单校验规则
const formRules = ref({
  // roomName: [
  //   { required: true, message: '请输入标题', trigger: 'blur' },
  // ],

})



const formModel = ref(Object.assign({}, formAttrs));

const uploadRef = ref(null)

// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '600px',
})
// 表单组件的引用实例

// ======================================================
//                      点击操作
// ======================================================


// 点击取消按钮
const onCancel = () => {
  dialogInfo.value.visible = false;
}
// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const show = async (id, title, item = null, width = '600px') => {
  console.log(item)
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;
  if (id) {
    formModel.value = Object.assign({ ...formAttrs }, item);

  }
}

// 点击提交按钮
const onSubmit = () => {
  console.log('submit!', formModel.value);
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      console.log('表单校验失败：', fields);
      return;
    }
    EsAjax.post(ApiUrls.workerorderEdit, formModel.value).then(res => {
      if (res.data.code !== 200) {
        ElMessage.warning(res.data.msg);
        return;
      }
      dialogInfo.value.visible = false;
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })


  })
}




defineExpose({
  show
})
</script>

<style scoped>
</style>
